<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 同步任务  异步任务 ----》  微任务和宏任务；

      // 微任务：颗粒度更小 ，精度更高  和宏任务

      //宏任务任务： 【1】【2】【3】【4】【5】【6】....
      // 						 -               【6】
      // 微任务 ：【1】【2】【3】【4】【5】
      //                    - 【6】
      // promise 里的then 是一个微任务；
      // promise里的then是一个异步任务且是一个微任务；

      // 同步 ：22--》 333---》444--》555-》111
      // 同步 ： 2-3-4-5   异步：6-7-1
      //   1-6-7
      // 先同步   在异步 ：先微任务 在宏任务；

      console.log(2222);

      setTimeout(() => {
        console.log(6666);
      });
      let p = new Promise((res) => {
        console.log(3333);
        res(111);
      });
      setTimeout(() => {
        console.log(7777);
      });

      console.log(444);
      p.then((res) => {
        console.log(res);
      });
      console.log(555);

      // 先执行宏任务 在执行微任务；
      // 【1[1,2,3...]】 【2 [1,2,3..]】 【3[]】 【4[]】 【5[]】;

      // 宏任务 主线程 （script） --->大的宏任务里包含的就是 同步代码；
      // 主线程的微任务队列
      // 下一个宏任务
      // [script:同步代码【then】] --->[settimeout[]]---->[setimeout[]];

      // 在广义上讲 同步代码 也是异步任务；
    </script>
  </body>
</html>
